<template>
  <div class="flex">
    <el-input ref="inviteLink" size="small" :value="link"/>
    <el-button size="small" type="primary" plain class="m-l-10"
               @click="copy($event)">复制邀请链接</el-button>
  </div>
</template>

<script>
export default {
  name: 'QuestionnaireInvitationLink', // 问卷邀请链接
  props: {
    questionnaire: {
      type: Object,
      required: true,
    },
  },
  computed: {
    link() {
      const host = document.location.host;
      return `${host}/#/${this.$rp.QUESTIONNAIRES}/${this.$rp.FILL_IN}?qn_key=${this.questionnaire.key}`;
    },
  },
  methods: {
    // 复制链接
    copy(el) {
      this.$refs.inviteLink.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        this.$message.success('复制成功');
        el.currentTarget.focus();
      }
    },
  },
};
</script>

<style></style>
